<template>
  <a-spin wrapperClassName="" :spinning="isLoading">
    <!-- 时间不合法 -->
    <template v-if="valiStart">
      <h2 class="no_anwser">
        {{ `问卷作答将于${questionaire.startTime}开启！` }}
      </h2>
    </template>

    <template v-else-if="valiEnd">
      <h2 class="no_anwser">
        {{ `问卷作答已于${questionaire.endTime}结束！` }}
      </h2>
    </template>

    <template v-else>
      <template v-if="status === '1'">
        <a-form ref="formRef" layout="vertical" :model="validateForm">
          <DesignContent
            :style="{}"
            :questionaire="questionaire"
            :contentList="validateForm"
            :examList="questList"
            :type="type"
          />

          <div class="answer_button">
            <a-button type="primary" @click="onClick">提交</a-button>
          </div>
        </a-form>
      </template>

      <template v-else>
        <h2 class="no_anwser">问卷暂未开放</h2>
      </template>
    </template>
  </a-spin>
</template>
<script lang="ts">
import { defaultErrorHandler } from '@/library/util/error-handler';
import { ANSWERSUCCESS } from '@/router/route-name';
import { useAnswerContentStore } from '@/store/answer';
import { useQuestTypeChoseStore } from '@/store/create';
import { useDesignSliderStore } from '@/store/design';
import { Questionaire, QuestsType } from '@/store/design/types';
import DesignContent from '@/views/design/DesignContent.vue';
import dayjs from 'dayjs';
import { computed, defineComponent, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
  components: { DesignContent },
  setup() {
    const contentStore = useAnswerContentStore();
    const sliderStore = useDesignSliderStore();
    const useTypeStore = useQuestTypeChoseStore();
    const route = useRoute();
    const router = useRouter();
    const formRef = ref();

    contentStore.setQuestId(route.query.id as string);
    contentStore.getContent();

    if (!sliderStore.getQueryList.length) {
      // TODO
      sliderStore.getExamType(String(contentStore.questionaire.queType + 1));
    }

    const questionaire = computed<Questionaire>(
      () => contentStore.getQuestionaire ?? new Questionaire(),
    );

    const questList = computed<QuestsType[]>(() => sliderStore.getQueryList);
    const type = computed<number>(() => useTypeStore.selectType.id);
    const isLoading = computed<boolean>(() => contentStore.isLoading);

    // 校验部分
    const validateForm = computed(() => {
      return reactive(contentStore.getContentList);
    });

    const onClick = () => {
      try {
        formRef.value
          .validate()
          .then(() => {
            contentStore.queryAnwser().then(() => {
              router.push({ name: ANSWERSUCCESS });
            });
          })
          .catch((e: unknown) => console.log(e));

        //
      } catch (error) {
        defaultErrorHandler(error);
      }
    };

    const status = computed(() => contentStore.questionaire.status);

    const valiStart = computed(() => {
      // 当前时间早于开始时间
      if (!questionaire.value.startTime) return false;
      return dayjs().isBefore(questionaire.value.startTime);
    });

    const valiEnd = computed(() => {
      if (!questionaire.value.endTime) return false;
      return dayjs().isAfter(questionaire.value.endTime);
    });

    return {
      questionaire,
      questList,
      type,
      isLoading,
      validateForm,
      onClick,
      formRef,
      status,
      valiStart,
      valiEnd,
    };
  },
});
</script>
<style lang="less" scoped>
.answer_button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  button {
    width: 50%;
  }
}
.no_anwser {
  line-height: 33px;
  text-align: center;
  padding: 24px;
}
</style>
